<template>
    <div class="pay">
        <ul class="payList">
            <li class="payitem">
                <img class="iconfont icon-weixinzhifu" src="" alt="">
                <span style="margin-left: 26px;">微信支付</span>
            </li>
            <li class="payitem">
                <img class="payimg" src="../../assets/images/下载.jpg" alt="">
            </li>
        </ul>
    </div>

    <van-dialog v-model:show="show" title="微信支付" show-cancel-button :before-close="onbefore">
    <img class="diaimg" :src="payImg" />
    </van-dialog>

            
        <button class="btn" @click="setweixinimg">立即支付</button>
    
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
import { ref } from 'vue';
import router from '@/router';
  export default defineComponent({
    name:'Pay'
  })
</script>
<script lang="ts" setup>
import {getweixin,getpaystatus} from '@/api/address.'
import QRCode from 'qrcode'
import { useRoute } from 'vue-router';
let route = useRoute()
const codeUrl = ref()
const show = ref(false)
const payImg = ref()
const id = ref<number>()
let orderId = route.query.orderId
const setweixinimg = async () => {
    const reslut = await getweixin(orderId as string)
    codeUrl.value = reslut.data.codeUrl
    id.value = reslut.data.orderId
    payImg.value = await QRCode.toDataURL(codeUrl.value)
    show.value = true 
}
const onbefore = async (actions:any) => {
    if(actions === 'confirm'){
        const res = await getpaystatus(id.value)
        console.log(res)
       if(res.code === 200){
        console.log(111)
        router.push('/paysuccess')
        show.value = false
       }else{
        alert('支付失败,请重新支付')
        show.value = false
       }
    }else{
        show.value = false
    }
}
</script>

<style lang="less" scoped>
.payList{
    width: 100%;
    height: 500px;
    display: flex;
    margin-top: 110px;
    position: relative;
}
.payimg{
    height: 150px;
    width: 97%;
    margin-top: 34px;
}
.btn{
    position: absolute;
    top: 68%;
    left: 32%;
    background-color: red;
    color: white;
    outline: none;
}
.diaimg{
    widows: 200px;
    height: 200px;
    margin-left: 57px;
}
</style>
